<!-- Navigation Bar -->
<div class="navbar navbar-fixed-top navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" routerLink="/"><img src="assets/logo.png" width="230" alt="Logo"></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto text-right">
        @for (option of this.options; track option) {
          <li class="nav-item">
            @if (option.route) {
              <a class="nav-link" [routerLink]="option.route">{{option.label}}</a>
            }
            @if (option.url) {
              <a class="nav-link" href="{{option.url}}">{{option.label}}</a>
            }
          </li>
        }
      </ul>
    </div>
  </div>
</div>

<!-- Content -->
<router-outlet></router-outlet>

<!--Footer-->
<div style="background: var(--dark); color: var(--light); padding-bottom: 10px; padding-top: 20px;">
  <div class="container text-right">
    <img style="height:28px;" src="assets/logo.png"/>
    <p><small>Distributed under MIT license, </small></p>
  </div>
</div>
